<script setup lang='ts'>
import { computed, ref } from 'vue'
import { useStore } from '@/store';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import screenfull from 'screenfull'

const I18n = useI18n()
const router = useRouter()
const store = useStore()
// 获取 stroe 里面的用户数据
const userInfo = computed(() => {
    return store.state.authState.userInfo
})
// 退出登录
const outLogin = () => {
    localStorage.removeItem('token')
    router.push({ path: '/login' })
}
const getCurrentLeng = computed(() => {
    return I18n.locale.value
})
// 当前语言
const leng = computed(() => {
    const a = I18n.locale.value
    switch (a) {
        case 'chs':
            return '中文简体'
        case 'en':
            return 'English'
    }
    return
})

// 切换语言
const onLeng = (leng: string) => {
    I18n.locale.value = leng
    localStorage.setItem('leng', leng)
}
// 是否全屏
const isFullscreen = ref(false)
// 全屏
const onFull = () => {
    if (isFullscreen) {
        screenfull.toggle()
    } else {

    }
}
</script>
<template>
    <div class='userInfo'>
        <div class="utils" style="font-size: 14px; display: flex;align-items: center;">
            <img src="../../assets/isFull.png" alt="" style="width: 30px;" @click="onFull">
        </div>
        <div class="user-img">
            <el-dropdown>
                <img :src="userInfo.avatar" alt="">
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="user-name">
            <div class="name">
                {{ userInfo.username }}
            </div>
            <div class="role">
                {{ userInfo.roleName }}
            </div>
        </div>
        <div class="leng">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ leng }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="onLeng('chs')"
                            :disabled="getCurrentLeng == 'chs'">中文简体</el-dropdown-item>
                        <el-dropdown-item @click="onLeng('en')"
                            :disabled="getCurrentLeng == 'en'">English</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<style lang='less' scoped>
.userInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;

    .user-img {
        object-fit: fill;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }

    .user-name {
        .name {}

        .role {
            color: gray;
            font-size: 14px;
        }
    }
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>